import 'package:flutter/material.dart';

class Widget_Stack_Page extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return Widget_Stack_State();
  }
}

class Widget_Stack_State extends State<Widget_Stack_Page> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Stack"),
        ),
        body: Container(
          padding: EdgeInsets.zero,
          child: ListView(
            //non-positioned方式
            children: <Widget>[
              Container(
                height: 300.0,
                child: Stack(
                  fit: StackFit.loose,
//                  alignment: AlignmentDirectional.topCenter,
                  alignment: FractionalOffset(0.9, 0.5),
                  children: <Widget>[
                    Container(
                      width: 100.0,
                      height: 100.0,
                      margin: EdgeInsets.only(right: 20.0,top: 10.0),
                      color: Color(0xff00ff00),
                    ),
                    Center(
                      child: GestureDetector(child: Text("按钮",
                        style: TextStyle(
                          decoration: TextDecoration.lineThrough,
                          fontSize: 18.0,
                          fontWeight: FontWeight.bold,
                          color: Color(0xffff0000),
                        ),),
                        onTap: () {
                          print("按钮");
                        },
                      ),
                    ),
                  ],
                ),
                color: Color(0xfff1f1f1),
              ),

              Container(
                margin: EdgeInsets.only(top: 50.0),
                child: Stack(
                  children: <Widget>[
                    Container(
                      width: 200.0,
                      height: 100.0,
                      color: Color(0xfff1f1f1),
                    ),
                    Positioned(
                      child: GestureDetector(child: Text("按钮",
                        style: TextStyle(
                          decoration: TextDecoration.lineThrough,
                          fontSize: 18.0,
                          fontWeight: FontWeight.bold,
                          color: Color(0xffff0000),
                        ),),
                        onTap: () {
                          print("按钮");
                        },),
                      left: 10.0,
                      top: 20.0,
                    )
                  ],
                ),
              )

            ],
          ),
        ),
      ),
    );
  }
}

/**
 * Stack是层叠布局相当于Android中的absolutelayout或者RelativityLayout
 * Stack的布局根据child分为positioned和non-positioned两种，
 * positioned根据left，top，right，bottom来设置widget的位置，相对于组件左上角
 * non-positioned则根据alignment来设置widget位置。
 * Stack的子widget，先添加的在布局下层，后添加的在布局上层
    Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart, //对齐方式，alignment配合FractionalOffset,占据的百分比
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,//超过的部分是否裁剪掉
    List<Widget> children = const <Widget>[],
    })
 */
